<template>
	<view class="wx-wrap">
		<image class="header-bg" src="https://p7.itc.cn/q_70/images03/20230819/5ae737061ffb40aba01eded43ce06449.png" mode="widthFix"></image>
		<view class="content">
			<view class="content-item" @click="onItemClick('people')">
				<image src="https://t12.baidu.com/it/u=22470765,237944379&fm=30&app=106&f=JPEG?w=450&h=450&s=EF76CF4FEE62865D98E445B90300C012" mode=""></image>
				<view class="desc">
					<view class="name">
						人物图鉴
					</view>
					<view class="text">
						所有人物妖怪信息
					</view>
				</view>
			</view>
			<view class="content-item" @click="onItemClick('weapon')">
				<image src="https://mp-675e619e-cf57-48e0-bce5-01b0726130f8.cdn.bspapp.com/cloudstorage/c2df5088-95c3-41fa-8fbb-a5cd6137c859.jpg" mode=""></image>
				<view class="desc">
					<view class="name">
						装备图鉴
					</view>
					<view class="text">
						所有装备图鉴
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		onLoad() {
		},
		methods: {
			onItemClick(item) {
				uni.navigateTo({
					url: `/pages/${item}/index`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wx-wrap {
		min-height: 100vh;
		background: #0a0809;
		.header-bg {
			width: 100vw;
		}
		.content {
			position: relative;
			top: -200rpx;
			.content-item {
				width: 80%;
				margin: 20rpx auto 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: rgba(250, 250, 250, .2);
				color: #fff;
				padding: 20rpx 40rpx;
				border-radius: 20rpx;
				image {
					width: 100rpx;
					height: 100rpx;
				}
				.name {
					font-size: 40rpx;
					font-weight: 600;
					text-align: right;
				}
				.text {
					font-size: 20rpx;
					opacity: .7;
					text-align: right;
				}
			}
		}
	}
</style>